<template>
    <view>
        <image class="hotel-image" src="https://ffa.firstui.cn/uploadfile/240820191726977.png"></image>
        <view class="container">
            <view class="hotel-info">
                <text class="hotel-name">{{ hotel.name }}</text>
                <text class="hotel-subtitle">{{ hotel.subtitle }}</text>
                <view class="tags">
                    <block v-for="(item, index) in hotel.tags" :key="index">
                        <text class="tag">{{ item }}</text>
                    </block>
                </view>
                <text class="rating">{{ hotel.rating }}分</text>
                <view class="address">
                    <view>
                        <image class="imagedw" src="https://pic.imgdb.cn/item/6695dcedd9c307b7e95692d1.png" />
                        <text>{{ hotel.address }}</text>
                    </view>
                    <view onTap="handleTap">
                        <text>地图/街景</text>
                        <ant-icon onTap="handleTap" data-id="icon" type="RightOutline" style="font-size: 15px" />
                    </view>
                </view>
            </view>
            <view class="booking-info">
                <text class="booking-time">预约时间</text>
                <view class="time-slot">
                    <ant-range-picker
                        slot="extra"
                        placeholder="请选择"
                        :defaultValue="defaultDateRange"
                        onPickerChange="handlePickerRangeChange"
                        onVisibleChange="handleTriggerPicker"
                        onOk="handleRangeOk"
                    />
                    <text class="box1">{{ hotel.booking.duration }}</text>
                </view>

                <view class="booking-details">
                    <image class="booking-image" src="https://ffa.firstui.cn/uploadfile/240820192005269.png"></image>
                    <text class="booking-title">{{ hotel.booking.title }}</text>
                    <text class="booking-subtitle">{{ hotel.booking.subtitle }}</text>
                    <view class="box3">
                        <ant-button type="primary" inline onTap="hand" className="round">预定</ant-button>
                    </view>
                </view>
            </view>
            <view class="hotel-details">
                <text class="hotel-details-title">店铺信息</text>
                <view class="box2">
                    <text class="box2">入住: {{ hotel.details.checkIn }}</text>
                    <text class="box2">退房: {{ hotel.details.checkOut }}</text>
                    <text class="box2">开业: {{ hotel.details.openingYear }}</text>
                    <text class="box2">翻新: {{ hotel.details.renovationYear }}</text>
                    <text class="box2">规模: {{ hotel.details.rooms }}</text>
                </view>
            </view>
            <view class="reviews">
                <view class="box">
                    <text>评论</text>
                    <text style="color: #1782e8">查看更多</text>
                </view>
                <block v-for="(item, index) in tuijian" :key="index">
                    <view class="review">
                        <image class="box-image" mode="scaleToFill" :src="item.image" />
                        <text class="text1">{{ item.name }}</text>
                        <text class="review-text">{{ item.content }}</text>
                    </view>
                </block>
            </view>
        </view>
    </view>
</template>

<script>
	import {
		ref,
		onMounted
	} from 'vue';
	import {
		onShow,
		onLoad
	} from '@dcloudio/uni-app';
	import {
		onPullDownRefresh,
		onReachBottom
	} from "@dcloudio/uni-app";

export default {
    components: {

    },
    data() {
        return {
            commentid: 0,
            content: '',
            createTime: '',
            fabuid: 0,
            sonopenID: '',
            updateTime: '',
            tuijian: [],

            hotel: {
                name: '敦煌服饰店',
                subtitle: '',
                tags: ['傣族', '预约', '好评'],
                rating: 4.7,
                address: '厦门市思明区环岛路292号',
                booking: {
                    time: '10-23 周一 - 10-25 周三',
                    duration: '共三小时',
                    title: '敦煌服饰',
                    subtitle: '免费妆造'
                },
                details: {
                    checkIn: '14:00 - 18:00',
                    checkOut: '12:00前',
                    openingYear: '2019年',
                    renovationYear: '2019年',
                    rooms: '121间'
                },
                reviews: [
                    {
                        name: 'momoko',
                        image: 'https://www.77shw.com/wp-content/uploads/2018/05/OT20180508170856556.jpg',
                        content:
                            '对于喜欢搭配的老朋友和女朋友来说，还是值得推荐的。热情周到的客服服务，款式大方美观，外观别具一格。室内场馆设施齐全，待孩子放假过完节，应该订购此班项目。'
                    }
                ]
            },

            defaultDateRange: ''
        };
    },
    onLoad() {
        uni.request({
            url: url + '/selectByIDComment',
            method: 'POST',
            data: {},
            headers: {
                'content-type': 'application/json' // 默认值
            },
            dataType: 'json',
            success: (res) => {
                if (res.data && res.data.data) {
                    this.setData({
                        tuijian: res.data
                    });
                }
            },
            fail: (error) => {
                console.error('fail: ', JSON.stringify(error));
            },
            complete: (res) => {
                uni.hideLoading();
            }
        });
    },
    methods: {
        onBookingButtonClick() {
            uni.showToast({
                content: '预订功能尚未实现'
            });
        },

        handleTap() {
            uni.navigateTo({
                url: '/pages/Ditu/Ditu'
            });
        },

        hand() {
            uni.navigateTo({
                url: '/pages/fsdingdan/fsdingdan'
            });
        }
    }
};
</script>
<style>
.container {
    padding: 10px;
}

.hotel-image {
    width: 100%;
    height: 305px;
}

.hotel-info {
    margin-top: 16px;
}

.hotel-name {
    font-size: 24px;
    font-weight: bold;
}

.hotel-subtitle {
    display: flex;
    color: #666;
    font-size: 14px;
    margin-top: 4px;
}

.tags {
    margin-top: 8px;
    display: inline-block;
}

.tag {
    display: inline-block;
    background-color: #1782e8;
    color: white;
    padding: 4px;
    margin-right: 4px;
    border-radius: 10px;
    font-size: 12px;
    margin-left: 10px;
}

.rating {
    display: inline;
    color: #1782e8;
    font-size: 20px;
    margin-top: 4px;
    position: absolute;
    left: 330px;
}

.address {
    width: 100%;
    height: 40px;
    margin-top: 8px;
    font-size: 14px;
    color: rgb(67, 64, 64);
    background-color: #bdbfc1;
    line-height: 40px;
    border-radius: 5px;
    display: flex;
    justify-content: space-between;
}
.imagedw {
    width: 15px;
    height: 15px;
    display: inline-block;
}

.booking-info {
    margin-top: 24px;
}

.booking-time {
    display: inline;
    font-size: 18px;
    font-weight: bold;
}

.time-slot {
    display: inline;
    justify-content: space-between;
    margin-top: 8px;
    margin-left: 10px;
}

.booking-image {
    width: 88px;
    height: 88px;
    margin-top: 16px;
}

.booking-details {
    margin-top: 16px;
}

.booking-title {
    font-size: 20px;
    font-weight: bold;
    position: relative;
    bottom: 50px;
    left: 10px;
}

.booking-subtitle {
    color: #1782e8;
    font-size: 14px;
    position: relative;
    left: -50px;
}

.booking-button {
    display: inline-block;
    background-color: #007aff;
    color: white;
    padding: 8px;
    margin-top: 16px;
    width: 80px;
    height: 30px;
    border-radius: 5px;
}

.hotel-details {
    margin-top: 24px;
}

.hotel-details-title {
    display: inline-block;
    font-size: 18px;
    font-weight: bold;
}
.hotel-details-title1 {
    display: inline-block;
    font-size: 18px;
    font-weight: bold;
    margin-left: 55px;
}

.review-text {
    display: flex;
    margin-top: 10px;
}
.box1 {
    position: absolute;
    left: 320px;
}
.box2 {
    display: block;
    margin-top: 10px;
}
.box {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
}
.box-image {
    display: inline-block;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-top: 10px;
}
.text1 {
    display: inline-block;
    position: relative;
    bottom: 20px;
}
.box3 {
    display: inline-block;
    position: absolute;
    left: 300px;
    margin-top: 35px;
}

</style>
